<template>
  <div>
    <van-nav-bar :border="false" fixed title="会员中心" left-arrow @click-left="GOback" placeholder />
    <section class="show_time_amount">
      <section>
        <header class="time_last">支付剩余时间</header>
        <van-count-down :time="time" />
      </section>
    </section>
    <div class="pay_way">选择支付方式</div>
    <section class="pay_way_list">
      <section class="pay_item">
        <div class="pay_icon_contaienr">
          <div class="zhifubao"></div>
          <span>支付宝</span>
        </div>
        <svg class="icon icon1" aria-hidden="true" ref="icon_pay" @click="check">
          <use xlink:href="#icon-selectfill"></use>
        </svg>
      </section>
    </section>
    <section class="pay_way_list">
      <section class="pay_item">
        <div class="pay_icon_contaienr">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-weixinzhifu"></use>
          </svg>
          <span>支付宝</span>
        </div>
        <svg class="icon" aria-hidden="true" ref="icon_pay1" @click="check1">
          <use xlink:href="#icon-selectfill"></use>
        </svg>
      </section>
    </section>
    <p class="determine" @click="ConfirmAdd">确认支付</p>
    <!-- 弹框 -->
    <van-dialog v-model="show1" confirmButtonColor="#3199e8" @confirm="jump">
      <template #default>
        <div class="tip_icon">
          <span></span>
          <span></span>
        </div>
        <p class="tip_text" v-if="zt">{{text}}</p>
        <p class="tip_text" v-else>{{text1}}</p>
      </template>
    </van-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      time: 0.2502 * 60 * 60 * 1000,
      show1: false,
      zt: true,
      text: '暂不开放支付功能',
      text1: '当前环境无法支付，请打开官方APP进行付款'
    }
  },
  methods: {
    GOback() {
      this.$router.go(-1)
    },
    check() {
      if ((this.$refs.icon_pay1.style = '#4cd964')) {
        this.$refs.icon_pay1.style.fill = '#ccc'
        this.$refs.icon_pay.style.fill = '#4cd964'
      }
    },
    check1() {
      if ((this.$refs.icon_pay.style = '#4cd964')) {
        this.$refs.icon_pay.style.fill = '#ccc'
        this.$refs.icon_pay1.style.fill = '#4cd964'
      }
    },
    // 点击支付按钮弹框显示
    ConfirmAdd() {
      this.zt = false
      this.show1 = true
    },
    jump() {
      if (this.zt === false) {
        this.$router.push('/order')
      }
    }
  },
  mounted() {
    this.show1 = true
  }
}
</script>

<style lang="less" scoped>
.show_time_amount {
  background-color: #fff;
  padding: 0.7rem;
  text-align: center;
  .time_last {
    font-size: 0.55rem;
    color: #666;
    margin-top: 0.95rem;
  }
}
.van-count-down {
  margin: 0.3rem 0 1rem;
}
.pay_way {
  background-color: #f1f1f1;
  padding: 0 0.65rem;
  font-size: 0.65rem;
  color: #666;
  line-height: 1.8rem;
}
.pay_way_list {
  background-color: #fff;
  .pay_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0.7rem;
    line-height: 2.6rem;
    border-bottom: 0.025rem solid #f5f5f5;
    .pay_icon_contaienr {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .zhifubao {
        background-image: url('@/assets/img/zhifubao.png');
        width: 1.8rem;
        height: 1.8rem;
        background-size: 100% 100%;
        margin-right: 0.2rem;
      }
      .icon {
        width: 2rem;
        height: 2rem;
      }
      span {
        font-size: 0.65rem;
        color: #666;
      }
    }
  }
}
.icon {
  margin: 0;
  width: 1.3rem;
  height: 1.3rem;
  fill: #ccc;
}
.icon1 {
  fill: #4cd964;
}
</style>